<template>
  <view>
    <u-navbar title="上传处方" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 50rpx">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 31rpx 33rpx">
        <!-- {{data}} -->
        <view class="" style="font-size: 28rpx">就诊人{{ data.patient_name }}（{{ data.patient_gender_text }} {{ data.patient_age }}岁）</view>
        <!-- <view class="" style="font-size: 26rpx;color: #1A9EFF;" @tap="back">
					更改患者
				</view> -->
      </view>
      <view class="" style="display: flex; align-items: center">
        <view class="" style="font-size: 28rpx; padding-left: 31rpx">省份</view>
        <view class="" style="margin-left: 35rpx; width: 542rpx; height: 58rpx">
          <input
            type="text"
            placeholder="请输入省份"
            style="font-size: 28rpx; width: 542rpx; height: 58rpx; background: #f8f8f8; color: #222222; padding-left: 19rpx"
            v-model="data.patient_city"
          />
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; margin-top: 30rpx">
        <view class="" style="font-size: 28rpx; padding-left: 31rpx">手机</view>
        <view class="" style="margin-left: 35rpx; width: 542rpx; height: 58rpx; background: #f8f8f8; display: flex; align-items: center; justify-content: space-between">
          <input type="text" placeholder="请输入手机号" style="font-size: 28rpx; color: #222222; padding-left: 19rpx" v-model="data.patient_mobile" />
          <!-- <view class="" style="font-size: 26rpx;color: #1A9EFF;padding-right: 26rpx;" @tap="show1=true">
						修改
					</view> -->
        </view>
      </view>
    </view>
    <!-- 描述病情 -->
    <view class="" style="margin: 30rpx 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 27rpx">
      <view class="" style="font-size: 32rpx; font-weight: bold; padding: 31rpx 33rpx">描述病情</view>
      <textarea
        name=""
        v-model="value"
        id=""
        cols="30"
        rows="10"
        placeholder="例：持续治理咽炎近1年，近期除声音嘶哑外无其它不适，想按上次的药房继续用药"
        style="background: #f8f8f8; font-size: 28rpx; height: 160rpx; padding: 24rpx 42rpx 0 27rpx; width: 580rpx; margin: 0 auto"
      ></textarea>
    </view>

    <!-- 请上传清晰完整的处方照片 -->
    <view class="" style="margin: 30rpx 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 27rpx">
      <view class="" style="font-size: 32rpx; font-weight: bold; padding: 31rpx 33rpx 21rpx 33rpx">请上传清晰完整的处方照片</view>
      <view class="" style="font-size: 26rpx; color: #999999; padding-left: 34rpx">药师将根据您上传的处方为信息为您抓药</view>
      <view class="" style="padding: 30rpx">
        <u-upload :action="action" :file-list="fileList" @on-uploaded="onUploaded" max-count="3" :form-data="formData"></u-upload>
      </view>
    </view>

    <!-- 补充说明 -->
    <view class="" style="margin: 30rpx 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 27rpx">
      <view class="" style="font-size: 32rpx; font-weight: bold; padding: 31rpx 33rpx 21rpx 33rpx">补充说明</view>
      <view class="" style="font-size: 26rpx; color: #999999; padding-left: 34rpx; margin-bottom: 33rpx">若有既往病史、过敏史、肝脏损伤、请在此处填写</view>
      <textarea
        name=""
        id=""
        cols="30"
        rows="10"
        placeholder="过敏史；既往病史"
        v-model="explain"
        style="background: #f8f8f8; font-size: 28rpx; height: 160rpx; padding: 24rpx 42rpx 0 27rpx; width: 580rpx; margin: 0 auto"
      ></textarea>
    </view>

    <view class="" style="padding: 20rpx 0 22rpx 57rpx; color: #666666; font-size: 26rpx">温馨提示</view>
    <view class="" style="font-size: 26rpx; color: #666666; padding: 0 60rpx">*号源由医生本人提供、与医生无关。到医院需按医院门 诊价格缴纳医事服务费</view>
    <view class="" style="height: 220rpx"></view>
    <view class="" style="height: 200rpx; background: #fff; width: 100%; position: fixed; bottom: 0">
      <view class="btn" @tap="open">按方开药</view>
    </view>

    <u-picker v-model="show" mode="region" :params="params" confirm-color="#1A9EFF" @confirm="confirm"></u-picker>
    <u-modal v-model="show1" title="修改手机号" :show-cancel-button="true">
      <view class="" style="padding: 40rpx 50rpx; font-size: 28rpx">
        <text>原手机号</text>
        <text style="padding-left: 38rpx">{{ data.patient_mobile }}</text>
      </view>
      <view class="" style="padding: 0rpx 50rpx; font-size: 28rpx; display: flex; font-size: 28rpx">
        <text>新手机号</text>
        <input type="number" placeholder="请输入新手机号" v-model="phone" style="font-size: 28rpx; padding-left: 39rpx" />
      </view>
      <view class="" style="padding: 40rpx 50rpx; font-size: 28rpx; display: flex; font-size: 28rpx; align-items: center">
        <view style="width: 120rpx">验证码</view>
        <input type="number" placeholder="填写验证码" v-model="phone" style="font-size: 28rpx; width: 200rpx; padding-left: 30rpx" />
        <view class="" style="font-size: 26rpx; color: #1a9eff">获取验证码</view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#F8F8F8'
      },
      action: 'https://wenzhen.jiangkukeji360.com/api/common/upload',
      fileList: [],
      radio: 0,
      show: false,
      show1: false,
      params: {
        city: false,
        area: false,
        province: true
      },
      city: '',
      data: [],
      id: null,
      pid: null,
      phone: '',
      value: '',
      explain: '',
      formData: {
        token: uni.getStorageSync('user_info').token
      },
      imgbox: [],
      t_address: '',
      t_mobile: '',
      t_name: '',
      doctor: {},
      patient_city: '',
      patient_mobile: ''
    };
  },
  //方法
  methods: {
    onUploaded(res) {
      let imgs = [];
      res.map((i) => {
        imgs.push(i.response.data.url);
      });
      this.imgbox = [...new Set(imgs)];
      console.log(this.imgbox);
    },
    confirm(e) {
      console.log(e);
      this.city = e.province.label;
    },
    back() {
      // uni.navigateBack()
      uni.navigateTo({
        url: '/pages/user/data?type=1'
      });
    },
    detail() {
      this.api({
        url: '/api//index/patientInfo',
        method: 'post',
        data: {
          patient_id: this.pid
        }
      }).then((res) => {
        this.data = res.data;
        this.patient_city = res.data.patient_city;
        this.patient_mobile = res.data.patient_mobile;
      });
      this.api({
        url: '/api//doctor/details',
        method: 'post',
        data: {
          doctor_id: this.id
        }
      }).then((res) => {
        this.doctor = res.data;
      });
    },
    open() {
      this.api({
        url: '/api/drugs/createOrder',
        method: 'post',
        data: {
          doctor_id: this.id,
          patient_id: this.data.patient_id,
          patient_city: this.data.patient_city,
          patient_mobile: this.data.patient_mobile,
          illness_one: this.value,
          illness_image: this.imgbox,
          illness_three: this.explain,
          // drugs_status:this.radio==0 ? 1 : 2,
          // t_name:this.t_name,
          // t_mobile:this.t_mobile,
          // t_address:this.t_address,
          clinic_name: this.doctor.hospital_name
        }
      }).then((res) => {
        uni.navigateTo({
          url: '/news/load/load?id=' + res.data.serve_id
        });
      });
    }
  },
  //首页渲染
  onLoad(op) {
    this.id = op.id;
    this.pid = op.pid;
    this.detail();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}

.btn {
  margin: 60rpx 110rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  font-size: 32rpx;
  color: #fff;
  text-align: center;
  line-height: 80rpx;
}
</style>
